<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@include file="common/head.jsp"%>
<script type="text/javascript">
    window.json=null;
</script>
<div class="layui-body" onload="init();">
    <div style="padding: 15px;">
        <div class="layui-tab-item layui-show">
            <%--table建立--%>
            <table lay-filter="table_applyMsg" id="table_applyMsg"></table>
        </div>
    </div>
</div>
<%@include file="/jsp/user/common/foot.jsp" %>
<script type="text/javascript">
    /*初始化table*/
    function init() {
        sessionStorage.setItem("checked","yes");//设置审批消息已被用户查看了
        checked();//将Check值改为1
        render();
    }
    window.onload=init;
    /*用户完成浏览审批：用户浏览审批消息后，将审批消息的check值改为1*/
    function checked() {
        $.ajax({
            type:'POST'
            ,url:'${pageContext.request.contextPath}/jsp/apply.do?method=checked'
            ,dataType:'json'
        })
    }
    /*查询数据*/
    /*人才是最大的Bug(cols写成了col)*/
    function render() {
        layui.use(['form','table','jquery'],function () {
            let table = layui.table;
            table.render({
                elem: '#table_applyMsg'
                , size: 'lg'
                , even: true
                , skin: 'row'
                ,page:true
                ,limit:9
                ,limits:[1,5,9]
                ,autoSort: false
                , cols: [[
                    {
                        field: 'applyID'
                        , unresize: 'true'
                        , width: '7%'
                        , title: '申请ID'
                    }
                    ,{
                        field: 'lib'
                        , unresize: 'true'
                        , width: '12%'
                        , title: '实验室名称'
                    }
                    , {
                        field: '_class'
                        , unresize: 'true'
                        , width: '10%'
                        , title: '实验室类型'
                    }
                    , {
                        field: 'num'
                        , unresize: 'true'
                        , width: '8%'
                        , title: '人数'
                    }
                    , {
                        field: 'time'
                        , unresize: 'true'
                        , width: '10%'
                        , title: '申请时段'
                    }
                    ,{
                        field: 'apply_reason'
                        ,width: '12%'
                        ,title: '申请理由'
                    }
                    , {
                        field: 'status'
                        , unresize: 'true'
                        , width: '8%'
                        , title: '状态'
                        , templet: '#stateTpl'
                    }
                    , {
                        field: 'apply_time'
                        , unresize: 'true'
                        , width: '10%'
                        , title: '申请时间'
                    }
                    , {
                        field: 'check_time'
                        , unresize: 'true'
                        , width: '10%'
                        , title: '审批时间'
                    }
                    , {
                        field: 'operation'
                        , unresize: 'true'
                        , title: '操作'
                        , toolbar:cancel
                    }
                ]]
                ,url:'${pageContext.request.contextPath}/jsp/apply.do?method=getApplyMsg'
                ,parseData:function (res) {
                    let result;
                    if(this.page.curr){
                        result = res.data.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);
                    }
                    else{
                        result=res.data.slice(0,this.limit);
                    }
                    return{
                        "code":0
                        ,"data":result
                        ,"count":res.total
                    }
                }
            });
        });
    }
</script>
<script type="text/javascript" id="cancel">
    <a class="layui-btn layui-btn-radius layui-btn-danger" lay-event="cancel">
        <i class="layui-icon">&#x1006;</i> 取消申请
    </a>
</script>
<%--弹窗数据回显及操作--%>
<script type="text/javascript">
    layui.use(['table','layer'],function () {
        let table = layui.table;
        table.on('tool(table_applyMsg)',function (obj) {
            let data = obj.data;
            json = JSON.stringify(data);
            if (obj.event === 'cancel'){
                if (data.status === '申请成功' || data.status === '正在审核'){
                    cancel_apply();
                }else {
                    layer.msg('此申请不支持取消哦！🙅‍♀️🙅🏻‍♂️❌');
                }
            }
        });
    })
</script>
<%--动态设置单元格格式--%>
<script type="text/html" id="stateTpl">
    {{#  if(d.status === '申请失败'){ }}
    <span style="color: #f3021b;">{{ d.status }}</span>
    {{#  } else if(d.status === '申请成功'){ }}
    <span style="color: #129b8e;">{{ d.status }}</span>
    {{#  } else if(d.status === '正在审核'){ }}
    <span style="color: #096ed2;">{{ d.status }}</span>
    {{#  } else if(d.status === '已取消'){ }}
    {{ d.status }}
    {{#  } else if(d.status === '已过期'){ }}
    {{ d.status }}
    {{#  } }}
</script>
<script>
    function cancel_apply() {
        layer.open({
            type: 2,//1：直接写面板 2：链接面板
            title: '取消申请',
            shadeClose: true,
            skin: 'yourclass',
            content: "<%=path%>/jsp/user/eject/apply2.jsp",//链接面板
            area: ['33%', '78%'],//面板大小
            anim:5,
        })
    }
</script>
</body>

</html>